/* 
  首页的底部tabbar
 */
<template>
  <yd-tabbar slot="tabbar" active-color="#000">
    <yd-tabbar-item title="我的预约" link="" :active="selected === 'beauticianHome'" @click.native="handleTabChange('beauticianHome')">
      <yd-icon slot="icon" name="compose" size="0.54rem"></yd-icon>
    </yd-tabbar-item>
    <yd-tabbar-item title="日报" link="" :active="selected === 'beauticianDaily'"  @click.native="handleTabChange('beauticianDaily')">
      <yd-icon slot="icon" name="order" size="0.54rem"></yd-icon>
    </yd-tabbar-item>
    <yd-tabbar-item title="库存" link="" :active="selected === 'stock'"  @click.native="handleTabChange('beauticianStock')">
      <yd-icon slot="icon" name="type" size="0.54rem"></yd-icon>
    </yd-tabbar-item>
    <yd-tabbar-item title="我的" link="" :active="selected === 'user'"  @click.native="handleTabChange('beauticianUser')">
      <yd-icon slot="icon" name="ucenter-outline" size="0.54rem"></yd-icon>
    </yd-tabbar-item>
  </yd-tabbar>
</template>

<script>
export default {
  props: {
    selected: {
      default: () => "beauticianHome",
    },
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    handleTabChange(val) {
      _log(val);
      this.$router.push({
        name: val,
      });
    },
  },
  created() {},
};
</script>

<style>

</style>
